"use client";

import { useState, useEffect } from "react";
import Image from "next/image";
import { FiFile, FiBook, FiFolder, FiUsers } from "react-icons/fi";
import Avatar from "./avatar.png";

export default function ProfilePage() {
  const [userData, setUserData] = useState({
    name: "李阳",
    joinTime: "1年了",
    avatar: "/default-avatar.png",
    stats: {
      documents: 21,
      books: 0,
      folders: 1,
      organizations: 0,
    },
    recentActivities: [
      { type: "更新", title: "7月版本发布记录", date: "7个月了", user: "李阳" },
      { type: "更新", title: "7月版本发布记录", date: "7个月了", user: "李阳" },
      { type: "创建", title: "7月版本发布记录", date: "7个月了", user: "李阳" },
      { type: "更新", title: "8月版本发布记录", date: "7个月了", user: "李阳" },
      { type: "更新", title: "8月版本发布记录", date: "7个月了", user: "李阳" },
      { type: "创建", title: "8月版本发布记录", date: "7个月了", user: "李阳" },
      { type: "创建", title: "8月版本发布记录", date: "7个月了", user: "李阳" },
      { type: "创建", title: "7月版本发布记录", date: "7个月了", user: "李阳" },
    ],
  });

  // 模拟获取用户数据
  useEffect(() => {
    // 这里可以替换为实际的API调用
    // fetchUserData().then(data => setUserData(data));
  }, []);

  return (
    <div className='max-w-7xl mx-auto px-4 py-8'>
      {/* 个人资料卡片 */}
      <div className='bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden'>
        <div className='md:flex'>
          {/* 左侧资料区域 */}
          <div className='md:w-1/3 p-8 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800'>
            <div className='flex flex-col items-center'>
              <div className='relative w-32 h-32 mb-4'>
                <div
                  className='absolute inset-0 bg-blue-500 rounded-full flex items-center justify-center overflow-hidden cursor-pointer'
                  onClick={() =>
                    (window.location.href = `/profile/${userData.name}`)
                  }
                >
                  <Image
                    src={Avatar}
                    alt={userData.name}
                    width={128}
                    height={128}
                    className='object-cover'
                  />
                </div>
              </div>
              <h1
                className='text-2xl font-bold text-gray-800 dark:text-white cursor-pointer'
                onClick={() =>
                  (window.location.href = `/profile/${userData.name}`)
                }
              >
                {userData.name}
              </h1>
              <p className='text-gray-500 dark:text-gray-400 mt-1'>
                来这里{userData.joinTime}
              </p>
            </div>
          </div>

          {/* 右侧内容统计 */}
          <div className='md:w-2/3 p-8'>
            <h2 className='text-xl font-semibold mb-6 text-gray-800 dark:text-white'>
              已创建内容
            </h2>
            <div className='grid grid-cols-2 md:grid-cols-4 gap-4'>
              <StatsCard
                icon={<FiFile className='w-6 h-6 text-blue-500' />}
                count={userData.stats.documents}
                label='个文档'
              />
              <StatsCard
                icon={<FiBook className='w-6 h-6 text-indigo-500' />}
                count={userData.stats.books}
                label='本书'
              />
              <StatsCard
                icon={<FiFolder className='w-6 h-6 text-purple-500' />}
                count={userData.stats.folders}
                label='个文件夹'
              />
              <StatsCard
                icon={<FiUsers className='w-6 h-6 text-teal-500' />}
                count={userData.stats.organizations}
                label='个组织'
              />
            </div>
          </div>
        </div>
      </div>

      {/* 活动区域容器 */}
      <div className='mt-8 grid grid-cols-1 md:grid-cols-3 gap-8'>
        {/* 近期活动面板 */}
        <div className='bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8'>
          <h2 className='text-xl font-semibold mb-6 text-gray-800 dark:text-white'>
            近期活动
          </h2>
          <div className='space-y-4'>
            {userData.recentActivities.map((activity, index) => (
              <UserActivityCard
                key={index}
                user={activity.user}
                type={activity.type}
                title={activity.title}
                date={activity.date}
              />
            ))}
          </div>
        </div>

        {/* 最近创建的文档 - 占据右侧2/3空间 */}
        <div className='md:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8'>
          <h2 className='text-xl font-semibold mb-6 text-gray-800 dark:text-white'>
            最近创建的文档
          </h2>
          <div className='space-y-4'>
            <ActivityCard
              title='7月版本发布记录'
              date='2024-07-30'
              description='新增项目管理周报大屏系统, 2.项目管理-部门视角, 新增部门面板模块'
            />
            <ActivityCard
              title='8月版本发布记录'
              date='2024-08-02'
              description='项目立项工单更改项目计划开始时间, 计划结束时间, 项目排期, 立项文档地址等5个必填字段为非必填'
            />
            <ActivityCard
              title='CRM系统更新说明'
              date='2024-08-05'
              description='CRM系统新增项目管理, 补充套数, 资金出口, 项目产品范围等字段'
            />
          </div>
        </div>
      </div>
    </div>
  );
}

function StatsCard({ icon, count, label }) {
  return (
    <div className='bg-gray-50 dark:bg-gray-700 rounded-lg p-4 flex flex-col items-center transition-all hover:shadow-md'>
      <div className='mb-2'>{icon}</div>
      <div className='flex items-baseline'>
        <span className='text-2xl font-bold text-gray-900 dark:text-white'>
          {count}
        </span>
        <span className='ml-1 text-gray-500 dark:text-gray-400'>{label}</span>
      </div>
    </div>
  );
}

function ActivityCard({ title, date, description }) {
  return (
    <div className='border-l-4 border-blue-500 pl-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors'>
      <div className='flex justify-between items-start'>
        <h3 className='font-medium text-gray-800 dark:text-white'>{title}</h3>
        <span className='text-sm text-gray-500 dark:text-gray-400'>{date}</span>
      </div>
      <p className='mt-1 text-gray-600 dark:text-gray-300 text-sm line-clamp-2'>
        {description}
      </p>
    </div>
  );
}

function UserActivityCard({ user, type, title, date }) {
  return (
    <div className='flex items-start space-x-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors'>
      <div className='flex-shrink-0 mt-1'>
        <div
          className='w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white cursor-pointer'
          onClick={() => (window.location.href = `/profile/${user}`)}
        >
          <span>{user.charAt(0)}</span>
        </div>
      </div>
      <div className='flex-1 min-w-0'>
        <div className='flex'>
          <span
            className='font-medium text-gray-800 dark:text-white cursor-pointer'
            onClick={() => (window.location.href = `/profile/${user}`)}
          >
            {user}
          </span>
          <span className='mx-1 text-gray-500 dark:text-gray-400'>
            文档{type}
          </span>
          <span
            className='font-medium text-blue-500 cursor-pointer'
            onClick={() => (window.location.href = `/documents/${title}`)}
          >
            {title}
          </span>
        </div>
        <div className='flex items-center mt-1'>
          <span className='text-xs text-gray-500 dark:text-gray-400'>
            {date}
          </span>
        </div>
      </div>
    </div>
  );
}
